<!-- eslint-disable vue/multi-word-component-names -->
<template>
	<div class="sign">
		<AnimeHead></AnimeHead>
		<div class="a">
			<label class="zc">注册</label>
			<div>
				<span>手机号码</span
				><el-input
					v-model="phone"
					placeholder="请输入手机号"
					prefix-icon="el-icon-mobile-phone
"
				></el-input>
			</div>
			<div class="b">
				<span>验证码</span>
				<el-input
					v-model="captcha"
					placeholder="请输入验证码"
					prefix-icon="iconfont icon-mimazhaohuiyanzhengma
"
				></el-input>
				<el-button type="text" @click="getCode"
					>{{ isNaN(captchaName) ? captchaName : captchaName + 's' }}
				</el-button>
			</div>
			<el-button type="text" @click="sign()">同意并注册</el-button>
			<div class="c">
				<span class="d">已阅读并同意以下协议</span>
				<span class="e">淘宝平台服务协议</span>
				<span class="d">、</span>
				<span class="e">隐私权政策</span>
				<span class="d">、</span>
				<span class="e">法律声明</span>
				<span class="d">、</span>
				<span class="e">支付宝及客户端服务协议</span>
			</div>
			<router-link to="login" class="login">立即登录</router-link>
		</div>
	</div>
</template>

<script>
	import AnimeHead from '@/components/front/AnimeHead.vue'
	import isValid from '@/js/isValid'
	export default {
		components: { AnimeHead },
		data() {
			return {
				captcha: '',
				phone: '',
				//获取的验证码，时效60秒
				captcha1: '',
				captchaName: '获取验证码',
			}
		},
		methods: {
			// 获取验证码
			async getCode() {
				let res = await this.$api.sort.getCode()
				if (res.data.code === 1) {
					this.captcha1 = res.data.data
					this.captcha = this.captcha1
					this.captchaName = 60
					// 更新倒计时的显示
					var countdown = setInterval(() => {
						// 在页面上显示剩余时间
						this.captchaName -= 1
						// 如果倒计时结束，清除 interval
						if (this.captchaName < 1) {
							this.captchaName = '获取验证码'
							this.captcha1 = ''
							this.captcha = ''
							clearInterval(countdown)
						}
					}, 1000) // 每秒钟更新一次倒计时
				}
			},
			async sign() {
				let b = this.verify()
				if (b) {
					var user = {
						phone: this.phone.trim(),
					}
					let res = await this.$api.sort.sign(user)
					if (res.data.code === 1) this.$message.success(res.data.data)
					else this.$message.error(res.data.msg)
					this.$router.push('/login')
				}
			},
			//验证手机号
			verify() {
				if (this.phone === '') {
					this.$message.error('请输入手机号')
					return
				} else {
					let a = isValid.isvalidPhone(this.phone.trim())
					if (!a) {
						this.$message.error('请输入正确的手机号')
						return
					}
				}
				if (this.captcha1 === '') {
					this.$message.error('请获取验证码')
					return
				} else {
					if (this.captcha !== '') {
						if (this.captcha !== this.captcha1) {
							this.$message.error('验证码错误')
							return
						}
					} else {
						this.$message.error('请输入验证码')
						return
					}
				}
				return true
			},
		},
	}
</script>

<style scoped lang="less">
	a {
		color: #787878;
		text-decoration: none;
	}
	.a {
		width: 800px;
		height: 500px;
		background-color: white;
		background-repeat: no-repeat;
		text-align: center;
		margin: auto;
		padding-top: 100px;
	}
	.a img {
		width: 300px;
		height: 150px;
	}
	.a .zc{
		font-size: 30px;
		position: relative;
		top:-30px;
	}
	.a .b {
		margin-top: -70px;
	}
	.a div {
		position: relative;
		top: -25px;
	}
	.a div span {
		position: relative;
		left: -140px;
		top: 25px;
	}
	/deep/.b .el-button {
		background-color: transparent;
		color: #ff7449;
		position: relative;
		width: 60px;
		top: -125px;
		left: 105px;
	}
	.a .el-input {
		width: 300px;
		height: 100px;
		display: block;
		margin-left: 300px;
		margin-top: 20px;
	}
	/deep/ .el-input__prefix {
		height: 40px;
		width: 40px;
		background-color: #cccccc;
		color: #ffff;
		margin-left: -6px;
		border-radius: 2px;
		font-size: 25px;
	}
	/deep/ .el-input__inner {
		text-indent: 10px;
	}
	/deep/ .el-input__inner::placeholder {
		/* 调整placeholder的水平位置 */
		text-indent: 20px; /* 以及其他样式属性 */
	}
	/deep/.el-input__inner:focus {
		border-color: #c0c4cc; /* 修改聚焦时的边框颜色 */
		box-shadow: 0 0 3px #c0c4cc; /* 修改聚焦时的阴影效果 */
	}
	/deep/ .iconfont {
		height: 40px;
		width: 40px;
		position: relative;
		border-radius: 2px;
		display: block;
		background-color: #cccccc;
		color: #ffff;
		font-size: 26px;
	}

	/deep/ .el-button {
		background-color: #ff4400;
		width: 300px;
		margin-left: 100px;
		position: relative;
		top: -120px;
		color: white;
	}
	.a .login {
		position: relative;
		left: -60px;
		top: -62px;
	}

	.a .c {
		width: 300px;
		position: relative;
		left: 440px;
		top: -120px;
	}
	.a .c .d {
		color: #efe2d8;
	}
	.a .c .e {
		color: #ff7449;
	}
	.login {
		margin-left: 400px;
		color: #ff7131;
	}
</style>
